<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{ foo }}</h1>
    <h2>{{ fooBar }}</h2>
    <input type="text" v-model="foo">
    <br>
    <br>
    <button @click="clickHandler">click</button>
</div>

<script>
    const vm = new Vue({
        el: '#app',
        data() {
            return {
                foo: 'hello',
                bar: 'world'
            }
        },
        computed: {
            fooBar() {
                return this.foo + ' ' + this.bar
            }
        },
        mounted() {
            console.log(document.querySelector('h1'));
            console.log(this.foo);
        },
        methods: {
            clickHandler() {
                console.log('起码得实现一个事件吧!')
            }
        }
    })
    console.log(vm);
</script>
</body>
</html>
